---
type: tutorial
unitTitle: Costruisci e progetta con i componenti UI di Astro
title: 'Check-in: Unità 3 - Componenti'
description: |-
  Tutorial: Costruisci il tuo primo blog con Astro —
  Crea componenti Astro per riutilizzare il codice di elementi comuni nel tuo sito web
i18nReady: true
---
import Box from '~/components/tutorial/Box.astro';
import Checklist from '~/components/Checklist.astro';
import MultipleChoice from '~/components/tutorial/MultipleChoice.astro';
import Option from '~/components/tutorial/Option.astro';


Ora che hai file `.astro` e `.md` che generano intere pagine del tuo sito web, è il momento di creare e riutilizzare piccole porzioni di HTML con i componenti Astro!

## Guardando avanti

In questa unità, imparerai come creare **componenti Astro** per riutilizzare il codice di elementi comuni nel tuo sito web.

Costruirai:
- Un componente Navigazione che presenta un menu di link alle tue pagine
- Un componente Footer da includere in fondo a ogni pagina
- Un componente Social Media, utilizzato nel Footer, che collega alle pagine dei profili
- Un componente Hamburger interattivo per attivare/disattivare la Navigazione su dispositivi mobili

Nel frattempo, utilizzerai CSS e JavaScript per creare un design reattivo che si adatta alle dimensioni dello schermo e all'input dell'utente.



<Box icon="check-list">
## Lista di controllo

<Checklist>
- [ ] Sono pronto a creare alcuni componenti Astro!
</Checklist>
</Box>
